<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学籍统计</title>
  <link href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/style.css" rel="stylesheet">
  <style>
    .container-fluid {
      padding-top: 20px;
    }

    .form-horizontal h3,
    .result-table h3 {
      padding-left: 20px;
      font-size: 17px;
      line-height: 50px;
      background-color: #d7e5f1;
      border-radius: 5px;
      margin-top: 0;
      margin-bottom: 0;
    }

    .form-horizontal h3:before {
      display: inline-block;
      content: '';
      background: url(../../img/u10.png) no-repeat center center / cover;
      height: 28px;
      width: 28px;
      vertical-align: middle;
      margin-right: 3px;
    }

    .result-table h3:before {
      display: inline-block;
      content: '';
      background: url(../../img/u19.png) no-repeat center center / cover;
      height: 28px;
      width: 28px;
      vertical-align: middle;
      margin-right: 3px;
    }

    .form-horizontal .form-group {
      padding: 12px;
      margin-bottom: 0;
    }

    .form-horizontal .form-group:not(:last-child) {
      border-bottom: 1px solid #c9d0d0;
      margin: 0;
    }

    .form-horizontal .form-group .col-sm-4 {
      display: flex;
      justify-content: flex-end;
    }

    .form-horizontal .form-group .col-sm-4 input,
    .form-horizontal .form-group .col-sm-4 select {
      width: 200px;
    }

    .form-horizontal .form-group .col-sm-12 {
      display: flex;
      justify-content: center;
    }

    .form-horizontal .form-group .col-sm-12 button {
      width: 120px;
      margin: 5px 10px;
    }

    .nav-tabs li:first-child a {
      background-color: #b7cbba;
    }

    table {
      border-radius: 0;
    }
  </style>
</head>

<body>
  <div class="shadow-box"></div>
  <div class="container-fluid">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
        <a href="#statistics" aria-controls="statistics" role="tab" data-toggle="tab">学籍统计</a>
      </li>
      <li role="presentation">
        <a href="#details" aria-controls="details" role="tab" data-toggle="tab">学籍明细</a>
      </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="statistics">
        <form class="form-horizontal">
          <h3>查询条件</h3>
          <div class="form-group">
            <div class="col-sm-4">
              <label for="" class="control-label">地市(省直属)：</label>
              <select class="form-control" name="" id="">
                <option value="" selected>-请选择-</option>
                <option value="">省直属</option>
                <option value="">南宁市</option>
                <option value="">柳州市</option>
                <option value="">桂林市</option>
                <option value="">百色市</option>
                <option value="">全州市</option>
                <option value="">玉林市</option>
                <option value="">钦州市</option>
                <option value="">贵港市</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="control-label">区县：</label>
              <select class="form-control" name="" id="">
                <option value="" selected>-请选择-</option>
                <option value="">城中区</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="control-label">学校机构标识符：</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-4">
              <label for="inputPassword3" class="control-label">学校名称：</label>
              <input type="text" class="form-control">
            </div>
            <div class="col-sm-4">
              <label for="inputPassword3" class="control-label">年度：</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-default">查询</button>
              <button type="button" class="btn btn-default">重置</button>
            </div>
          </div>
        </form>
        <!-- <tr style="background-color: #169bd5"><td colspan="12"  style="text-align: left">课程导入</td></tr> -->
        <div class="result-table">
          <h3>查询结果</h3>
          <table class="table table-bordered table-hover ">
            <tr>
              <th>年度</th>
              <th>地区</th>
              <th>问题学籍学校数</th>
              <th>问题学籍学生数</th>
            </tr>
            <tr>
              <td></td>
              <td>合计</td>
              <td>3</td>
              <td>13</td>
            </tr>
            <tr>
              <td>2019</td>
              <td>广西农业广播电视学校</td>
              <td>1</td>
              <td>5</td>
            </tr>
            <tr>
              <td>2018</td>
              <td>广西城市建设学校</td>
              <td>1</td>
              <td>3</td>
            </tr>
            <tr>
              <td>2017</td>
              <td>广西桂林农业学校</td>
              <td>1</td>
              <td>5</td>
            </tr>
          </table>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="details">
        <form class="form-horizontal">
          <h3>查询条件</h3>
          <div class="form-group">
            <div class="col-sm-4">
              <label for="" class="control-label">地市(省直属)：</label>
              <select class="form-control" name="" id="">
                <option value="" selected>-请选择-</option>
                <option value="">省直属</option>
                <option value="">南宁市</option>
                <option value="">柳州市</option>
                <option value="">桂林市</option>
                <option value="">百色市</option>
                <option value="">全州市</option>
                <option value="">玉林市</option>
                <option value="">钦州市</option>
                <option value="">贵港市</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="control-label">区县：</label>
              <select class="form-control" name="" id="">
                <option value="" selected>-请选择-</option>
                <option value="">城中区</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="control-label">学校机构标识符：</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-4">
              <label for="inputPassword3" class="control-label">学校名称：</label>
              <input type="text" class="form-control">
            </div>
            <div class="col-sm-4">
              <label for="inputPassword3" class="control-label">年度：</label>
              <input type="text" class="form-control">
            </div>
            <div class="col-sm-4">
              <label for="inputPassword3" class="control-label">身份证号：</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-4">
              <label for="" class="control-label">地市(省直属)：</label>
              <select class="form-control" name="" id="">
                <option value="" selected>-请选择-</option>
                <option value="">身份证件号重复</option>
                <option value="">姓名性别出生日期重复</option>
                <option value="">身份证件号错误</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="" class="control-label">学生姓名：</label>
              <input type="text" class="form-control">
            </div>
            <div class="col-sm-4">
              <label for="" class="control-label">学籍号：</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-default">查询</button>
              <button type="button" class="btn btn-default">重置</button>
            </div>
          </div>
        </form>
        <!-- <tr style="background-color: #169bd5"><td colspan="12"  style="text-align: left">课程导入</td></tr> -->
        <div class="result-table">
          <h3>查询结果</h3>
          <table class="table table-bordered table-hover ">
            <tr>
              <th>问题类型</th>
              <th>数据来源</th>
              <th>地市</th>
              <th>区县</th>
              <th>姓名</th>
              <th>性别</th>
              <th>学籍号</th>
              <th>身份证号</th>
              <th>出生日期</th>
              <th>学校名称</th>
              <th>专业名称</th>
              <th>年级</th>
              <th>班级名称</th>
            </tr>
            <tr>
              <td>身份证件号重复</td>
              <td>省内中职在校生</td>
              <td>百色市</td>
              <td>市直属</td>
              <td>唐华祥</td>
              <td>男</td>
              <td>G452131199904291530</td>
              <td>452131199904291530</td>
              <td>19990429</td>
              <td>百色市培贤职业技术学校</td>
              <td>高星级饭店运营与管理</td>
              <td>2018</td>
              <td>18酒店管理08班</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    $('.nav-tabs a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    })

    let tbody = document.querySelectorAll('.result-table table tbody')[1];
    for (let i = 0; i < 3; i++) {
      let tr = document.querySelectorAll('.result-table table')[1].querySelectorAll('tr')[1].cloneNode(true);
      tbody.appendChild(tr)
    }

    let tabs = document.querySelectorAll('.nav-tabs li a');
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener('click', function () {
        for (let j = 0; j < tabs.length; j++) {
          tabs[j].style.backgroundColor = '#fff';
        }
        this.style.backgroundColor = '#b7cbba';
      })
    }
  </script>
</body>

</html>